<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width，initial-scale=1.0">
    <title>CSS 样式表练习</title>
    <link rel="stylesheet" href="../public/css/main.css">
    <link rel="stylesheet" href="css/another.css">
    <style>
        h2 {
            border-bottom: 2px solid #ccc;
            padding-bottom: 0.25em;
        }

        li[title*="属性"] {
            color: rgb(22, 150, 39)
        }

        .red {
            color: red
        }

        #demo {
            color: saddlebrown
        }

        a:hover {
            color: coral
        }

        li:nth-child(5) {
            background-color: cornflowerblue;
        }

        #qwe::first-letter {
            color: darkgreen;
            font-size: 1.2em;
        }

        ol ol li {
            color: blueviolet
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: fangsong;
        }
    </style>
</head>

<body>
    <header>
        <h1 contenteditable class="rgb(21, 214, 205)">CSS 样式表练习</h1>
    </header>
    <main>
        <section>
            <h2 style="color:rgb(37, 194, 66)"> 样式表的三种使用方式</h2>
            <ol>
                <li>外部样式表</li>
                <li>内部样式表</li>
                <li>内嵌样式表</li>
            </ol>
        </section>
        <section>
            <h2>选择符</h2>
            <ol>
                <li>[迷人]</li>
                <ol>
                    <li id="qwe">记我生涯多落魄</li>
                    <li title="属性选择符">每逢有意尽成灰</li>
                    <li class="red"> 梅卿莫问飘零事</li>
                    <li id="demo">几度春残不肯归</li>
                    <li class="child"><a href="#">飘零</a></li>



                </ol>
                <li>[茶烟]</li>
                <ol>
                    <li>茶烟暗损耐风摧</li>
                    <li>红浥遮屏误几回</li>
                    <li>此日鳞鸿桥下水</li>
                    <li>当时执笔忘描眉</li>

                </ol>
                <li>[岁馀]</li>
                <ol>
                    <li>朔风砭骨摧刀尺</li>
                    <li>困我形骸绪懒思</li>
                    <li>月上江南春色妩</li>
                    <li>烟撩塞北别栖枝</li>
                </ol>


        </section>


    </main>
    <footer>

    </footer>

</body>

</html>